<template>
  <div>
    <a-input-search
        v-model="keyword"
        placeholder="请输入公司名"
        enter-button="搜索来往公司"
        style="width: 400px;margin-bottom: 20px"
        size="large"
        @search="onSearch"
    />
    <a-button style="margin-left: 10px" size="large" type="danger" @click="reset">
      重置
    </a-button>
    <a-table :loading="loading" :columns="columns" :data-source="data" rowKey="id">
      <a slot="name" slot-scope="company">{{ company }}</a>
      <span slot="customTitle"><a-icon type="bank"/> 公司名称</span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'company'},
  },
  {
    title: '预留电话',
    key: 'phone',
    dataIndex: 'phone',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
];

export default {
  name: 'BasCompany',
  data() {
    return {
      loading: false,
      data: [],
      columns,
      keyword: ''
    };
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    onSearch() {
      if (this.keyword === '') {
        this.$message.warning('请输入搜索内容')
      } else {
        this.loadTableData()
      }
    },
    reset() {
      this.keyword = ''
      this.loadTableData()
    },
    loadTableData() {
      this.loading = true
      this.getRequest('/api/company/?name=' + this.keyword).then(resp => {
        if (resp) {
          if (this.keyword !== '' && resp.length === 0) this.$message.warning('未搜索到相关公司')
          this.loading = false
          this.data = resp
        }
      })
    }
  },
};
</script>

<style scoped>
.editable-add-btn {
  margin-bottom: 15px;
}
</style>
